<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>'Fashion' single page layout | Script tutorials demo</title>
    <meta charset="utf-8">

    <!-- Link styles -->
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen">

    <!-- Link scripts -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>   
    <script>
        $(window).load(function() {
            $('#slider').nivoSlider({
                effect:'random',
                slices:15,
                boxCols:8,
                boxRows:8,
                animSpeed:500,
                pauseTime:4000,
                directionNav:false,
                directionNavHide:false,
                controlNav:true,
                captionOpacity:0.9
            });
        });
    </script>

    <!--[if lt IE 9]>
    <script type="text/javascript" src="js/html5.js"></script>
    <![endif]-->
</head>
<body>

<div class="container">

    <header><!-- Define the header section of the page -->

        <div class="logo"><!-- Define the logo element -->
            <a href="http://www.script-tutorials.com/">
                <img src="images/logo.png" title="Fashion template" alt="Fashion template" />
            </a>
        </div>

        <section id="search"><!-- Search form -->
            <form action="#" onsubmit="return false;" method="get">
                <input type="text" onfocus="if (this.value =='Search..' ) this.value=''" onblur="if (this.value=='') this.value='Search..'" value="Search.." name="q">
                <input type="submit" value="">
            </form>
        </section>

    </header>

    <nav><!-- Define the navigation menu -->
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Tutorials</a></li>
            <li><a href="#">About</a></li>
            <li><a href="http://www.script-tutorials.com/new-html5css3-single-page-layout-fashion/">To Tutorial</a></li>
        </ul>
    </nav>

    <section id="slider-wrapper"><!-- Nivo promo slider -->
        <div id="slider" class="nivoSlider">
            <img style="display: none;" src="images/promo1.jpg" alt="" title="#htmlcaption-1">
            <img style="display: none;" src="images/promo2.jpg" alt="" title="#htmlcaption-2">
            <img style="display: none;" src="images/promo3.jpg" alt="" title="#htmlcaption-3">
        </div>
        <div id="htmlcaption-1" class="nivo-html-caption">
            <h5 class="p2">Your promo text 1</h5>
            <p>Promo text description here</p> 
        </div>
        <div id="htmlcaption-1" class="nivo-html-caption">
            <h5 class="p2">Your promo text 1</h5>
            <p>Promo text description here</p> 
        </div>
        <div id="htmlcaption-2" class="nivo-html-caption">
            <h5 class="p2">Your promo text 2</h5>
            <p>Promo text description here</p> 
        </div>
        <div id="htmlcaption-3" class="nivo-html-caption">
            <h5 class="p2">Your promo text 3</h5>
            <p>Promo text description here</p> 
        </div>
    </section>

    <div id="main"><!-- Define the main content section -->

        <section id="promo"><!-- Define the promo section -->
            <img alt="" src="images/prm.png" /> <h2>Welcome to test our 'Fashion' templates. We are making best templates for you.</h2>
        </section>

        <section id="content"><!-- Define the featured content section -->
            <ul>
                <li>
                    <h1>Clean</h1>
                    <p>Some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here</p>
                    <a class="more" href="#">Read more</a>
                </li>
                <li>
                    <h1>Light</h1>
                    <p>Some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here</p>
                    <a class="more" href="#">Read more</a>
                </li>
                <li>
                    <h1>Friendly</h1>
                    <p>Some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here</p>
                    <a class="more" href="#">Read more</a>
                </li>
            </ul>
        </section>

    </div>

    <div id="submain"><!-- Define submain content section -->
        <section id="subcontent"><!-- Define the content section #2 -->
            <div id="left">
                <ul>
                    <li>
                        <h3>'Mono' HTML5 CSS3 Single Page Layout</h3>
                        <a href="#"><img alt="" src="images/post.png" /></a>
                        <p>Today I want to introduce new great masterpiece – new template with codename: 'Mono'. This will nice HTML5/CSS3 template with nice light brown colors. Hope that you will like new styles and you will learn some new design methods.</p>
                        <a class="more" href="http://www.script-tutorials.com/creating-new-html5css3-single-page-layout-mono/">Read more</a>
                    </li>
                    <li>
                        <h3>Art theme - HTML5/CSS3 single page layout</h3>
                        <a href="#"><img alt="" src="images/post.png" /></a>
                        <p>Today I will like to product new great masterpiece – new template with codename: ‘Art theme’. This will nice HTML5 template with nice gray colors. Hope that you will like new styles and you will learn some new coding lessons.</p>
                        <a class="more" href="http://www.script-tutorials.com/creating-new-html5css3-single-page-layout-art-theme/">Read more</a>
                    </li>
                    <li>
                        <h3>Attractive HTML CSS Anime Theme Website Layout</h3>
                        <a href="#"><img alt="" src="images/post.png" /></a>
                        <p>Today I will like to product new masterpiece – new template with codename: ‘Anime theme’. This will nice HTML5 template with good colors. Hope that you can learn some new coding lessons and download our result and use it at your own site (its free as usual).</p>
                        <a class="more" href="http://www.script-tutorials.com/creating-new-html-css-website-layout-5-anime-theme/">Read more</a>
                    </li>
                </ul>
            </div>
            <div id="right">

                <div class="block"><!-- Archives block -->
                    <h3>Archives</h3>
                    <ul class="archives">
                        <li><a title="February 2012" href="#">February 2012</a></li>
                        <li><a title="January 2012" href="#">January 2012</a></li>
                        <li><a title="December 2011" href="#">December 2011</a></li>
                        <li><a title="November 2011" href="#">November 2011</a></li>
                        <li><a title="October 2011" href="#">October 2011</a></li>
                        <li><a title="September 2011" href="#">September 2011</a></li>
                    </ul>
                </div>

                <div class="block"><!-- Recent posts block -->
                    <h3>Recent posts</h3>
                    <ul class="recent">
                        <li>
                            <time datetime="2012-02-08T20:20">08-02-2012</time>
                            <p>Recnt post #1 - short description</p>
                            <a class="more" href="#">Read more</a>
                        </li>
                        <li>
                            <time datetime="2012-02-08T20:30">08-02-2012</time>
                            <p>Recnt post #2 - short description</p>
                            <a class="more" href="#">Read more</a>
                        </li>
                        <li>
                            <time datetime="2012-02-08T20:40">08-02-2012</time>
                            <p>Recnt post #3 - short description</p>
                            <a class="more" href="#">Read more</a>
                        </li>
                        <li>
                            <time datetime="2012-02-08T20:50">08-02-2012</time>
                            <p>Recnt post #4 - short description</p>
                            <a class="more" href="#">Read more</a>
                        </li>
                    </ul>
                </div>

            </div>
        </section>
    </div>

    <footer><!-- Define the footer section of the page -->
        <ul id="social"><!-- Social network links -->
            <li><a href="#" title="facebook"><img alt="" src="images/facebook.png" /></a></li>
            <li><a href="#" title="twitter"><img alt="" src="images/twitter.png" /></a></li>
            <li><a href="#" title="linkedin"><img alt="" src="images/linkedin.png" /></a></li>
            <li><a href="#" title="rss"><img alt="" src="images/rss.png" /></a></li>
        </ul>
        <div id="privacy">
            Michal Budzilo © 2012 <a class="link" href="#">Privacy Policy</a><br />
            <a class="link" href="http://www.biblioteka.com/"></a>
        </div>
    </footer>

</div>

</body></html>